<template>
    <div style="width: 100%; height: 100%;">
        <div class="scrollerTop">
            <div class="vip-search" @click="switchTo('/SpikeSearch')">
                <div>搜索商品名称<i></i></div>
            </div>
            <!-- <div class="team-list">
                <div class="team-list-ul">
                    <a v-for="(item,index) in getOne" :key="index" @click="shoplist(index,item.id)" v-if="item.level == 0" :class="{active:index == n}" >{{item.seckill_time}}<i></i></a>
                </div>
            </div> -->
            <div class="common-form spike">
                <a v-for="(item,index) in seckillTimeList" @click="shoplist(index,item.id)" :class="{active:index == n}" class="seckillTimeList">{{item.seckill_time}}</a>
            </div>
        </div>
        <div class="shop">
            <scroller :on-refresh="refresh" :on-infinite="infinite" ref="scrollerBottom" >
                <div class="common-form spike" v-for="(item,index) in Slist">
                    <router-link  :to="{path:'/SpikeDetail/'+ item.id}" >
                        <img :src="url + item.thumbnail" class="team-goods-img">
                        <div class="team-goods ">
                            <p>{{item.goods_title}}</p>
                            <p> 已售<em>{{item.has_sold}}</em>件</p>
                            <p class="spike-price">
                                <em>￥{{item.price}}</em>
                                <em>￥{{item.market_price}}</em>
                                <em>立即秒杀</em>
                            </p>
                        </div>
                    </router-link>
                </div>
                <div class="clearfix"></div>
            </scroller>
		</div>
    </div>
</template>

<script>
import url from 'url'
import qs from 'qs'
import wx from 'weixin-jsapi'
export default {
    name: 'VipClassifyList',
    // filter: {
    //     ellipsis:function(value) {
    //     if (!value) return ''
    //     if (value.length > 8) {
    //         return value.slice(0,8) + '...'
    //     }
    //     return value
    //     }
    // },
    data () {
        return {
            getOne:[],//一级菜单
            url:'http://api.huiwanzhong365.com',
            n: 0,
            Slist:[],
            page:1,
            // list:[1,2,3,4,5,6,7,8,9,0]
            seckillTimeList:[],
            timeId:1
        }
    },
    methods:{
        //下拉刷新
        refresh:function(done){
            console.log('refresh')
            this.Slist.length = 0
            this.page = 1
            this.$refs.scrollerBottom.finishInfinite(false)
            this.getDataList(this.page, done);
        },
        //上拉加载
        infinite(done){
            console.log('infinite')
            this.getDataList(this.page, done);
        },
        //会员商品列表
        getDataList(page, done){
            var that = this
            var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
            console.log(this.timeId)
            var draw = { 
                openid:openid,
                // goods_type:0,
                page:page,
                goods_type:1,
                seckill_time_id:this.timeId,
            }
            that.$http.post('/index/merchant/goods/list',qs.stringify(draw)).then(res=>{
                console.log(res.data.data)
                for( var i in res.data.data){
                    // return res.data.data[i].goods_title.slice(0,10) + '...'
                    res.data.data[i].goods_title = res.data.data[i].goods_title.substring(0,45)+ '…';
                    //console.log(res.data.data[i].goods_title)
                }
                if(res.data.data.length == 0) {
                    that.$refs.scrollerBottom.finishInfinite(true)
                    return false
                }
                that.Slist.push(...res.data.data);
                that.page++
                done()
            }).catch(err=>{
                console.log(err)
                done()  
            })
        },
        switchTo(path){
            // console.log(this.$router)
            this.$router.push(path)
        },
        //一级分类
        shoplist:function(index,id){
            //console.log(index)
            this.n = index;//this指向app
            //console.log(this.n)
            var that = this
            this.timeId = id
            
            var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
            var draw = { 
                openid:openid,
                id:this.timeId
                // level:0
            }
            that.$http.post('/index/merchant/goods/Seckill_goods_list',qs.stringify(draw)).then(res=>{
                //console.log(res.data)
                for( var i in res.data.data){
                    // return res.data.data[i].goods_title.slice(0,10) + '...'
                    res.data.data[i].goods_title = res.data.data[i].goods_title.substring(0,45)+ '…';
                    //console.log(res.data.data[i].goods_title)
                }
                this.Slist = res.data.data;
            }).catch(err=>{
                console.log(err)
            })
        },
        //秒杀时间
        //    /index/merchant/goods/seckillTimeList
        time:function(){
            var that = this
            var openid = localStorage.getItem("openid")
            var draw = { 
                openid:openid,
            }
            that.$http.post('/index/merchant/goods/seckillTimeList',qs.stringify(draw)).then(res=>{
                //console.log(res.data)
                for (var i in res.data) {
                    res.data[i].seckill_time = res.data[i].seckill_time.substring(0,5)
                }
                this.seckillTimeList = res.data
                //console.log(this.seckillTimeList)
            }).catch(err=>{
                console.log(err)
            })
        },
    },
    mounted(){
        this.time();
        // this.vipShop();
    }
}
</script>

<style scoped>
.shop{
    position: relative;
    height: 96%;
    margin-top:114px;
}
.clearfix{
    clear: both;
}
.scrollerTop{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background: #F9F9F9;
    width: 100%;
}
/* .active{
    font-size:12px;
} */
/* #outer-q41uw{
    width: 100%;
    height: 460px;
}
._v-container{
    position: inherit;
} */
._v-container{
    position: relative;
    /* height: 90%; */
}
.spike{
    position: relative;
}
/* .spike-price{
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 63%;
} */
.vip-search{
	width:94%;
	margin:0 auto;
	background:#FC2847;
	border-radius: 20px;
}
.vip-search div{
	color:#FFF;
	margin-top:15px;
    padding:8px 16px;
    margin-bottom: 15px;
}
.vip-search div i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../assets/sousuo.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: right;
}
.seckillTimeList{
    width:25%;
    float: left;
    text-align: center;
    padding-top:15px;
    margin-bottom: 15px;
    position: relative;
}
.seckillTimeList:before{
    position: absolute;
    content: "";
    width: 1px;
    height: 16px;
    right: 0;
    top: 48%;
    border-left: 1px solid #d8d8d8;
}
.seckillTimeList:last-of-type:before{
    position: absolute;
    content: "";
    width: 1px;
    height: 16px;
    right: 0;
    top: 48%;
    border-left: 1px solid #FFF;
}
.active{
    color:#FC2847;
    background-color: #FFF !important;
}
.team-search{
	width:94%;
	margin:0 auto;
	background: #FE2746;
	border-radius: 20px;
}
.team-search div{
	color:#FFF;
	margin-top:15px;
	padding:8px 16px;
}
.team-search div i{
    display: block;
    height: 19px;
    width: 20px;
    overflow: hidden;
    background: url(../../assets/sousuo.png) no-repeat;
    background-size: 100%;
    margin-top: 0px;
    float: right;
}
.team-list{
	width: 100%;
    height: 38px;
    display: inline-block;
    overflow: auto;
}
.team-list-ul{
	width:1000px;
}
.team-list-ul a{
    width: 82px;
    text-align: center;
    display: inline-block;
    float: left;
    padding: 7px 0;
    color: #999;
}
.team-list-ul-pink{
	color:#FE2746 !important;
	position: relative;
}
.team-list-ul-pink i{
    width: 0;
    height: 0;
    position: absolute;
    bottom: -3px;
    left: 41%;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
    border-top: 6px solid red;
}
.team-spell{
	width:94%;
	margin:0 auto;
}
.team-spell-goods img{
	width:100%;
	height:112px;
}
.team-spell-goods{
	width: 32%;
	background: #FFF;
	float: left;
	border-radius: 5px;
	overflow: hidden;
	margin-top:10px;
    padding-bottom: 5px;
}
.team-spell a:nth-child(2){
    margin: 10px 2% 0;
}
.team-spell-goods p:nth-child(2){
	width:94%;
	margin:0 auto;
	font-size:12px;
	padding:2px 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin-top: 4px;
}
.team-spell-goods p:nth-child(3){
    font-size: 12px;
    color: #FE2746;
    width: 94%;
    margin: 0 auto;
}
.team-spell-goods p:nth-child(3) em {
	font-weight: 600;
	color:#FE2746;
}
.team-spell-goods p:nth-child(4){
	font-size:12px;
	width:94%;
	margin:5px auto;
	color:#999;
}
.team-spell-goods p:nth-child(4) em{
	font-size:12px;
	background-color: rgba(252, 40, 71, 0.07);
	color:#FC2847;
	float: right;
	padding:2px 5px;
	border-radius: 20px;
    margin-top: -3px;
}
.team-goods-img{
	width:35%;
	height:118px;
	float: left;
}
.team-goods{
	width:63%;
	float: left;
	margin-left: 2%;
}
.team-goods p:nth-child(1){
	margin-top:3px;
}
.team-goods p:nth-child(2){
	color:#999;
	font-size:12px;
	margin:5px 0;
}
.team-goods p:nth-child(2) em{
	color:#FC2847;
}
.team-goods p:nth-child(3){
	margin-top:16px;
    position: absolute;
    width: 63%;
    bottom: 8px;
}
.team-goods p:nth-child(3) em:nth-child(1){
	color:#FC2847;
}
.team-goods p:nth-child(3) em:nth-child(2){
	text-decoration: line-through;
	font-size: 12px;
	color: #999;
}
.team-goods p:nth-child(3) em:nth-child(3){
	line-height: 20px;
	border-radius: 46px;
	background-color: rgba(254, 39, 70, 1);
	font-size: 12px;
    color: #FFF;
    padding: 4px 8px;
    float: right;
    margin-right: 6px;
    margin-top: -8px;
}

</style>
